<template>
  <div>
    <preHeader></preHeader>
    <div class="top-block"></div>
    <div id="volume">
      <div class="volume-info">
        <div class="item" @click.prevent="active = 'package'">
          <p><span class="symbol">￥</span><span class="number">0.00</span></p>
          <p class="item-txt">礼包推广额</p>
        </div>
        <div class="item" @click.prevent="active = 'commodity'">
          <p><span class="symbol">￥</span><span class="number">0.00</span></p>
          <p class="item-txt">礼包推广额</p>
        </div>
        <div class="item" @click.prevent="active = 'all'">
          <p><span class="symbol">￥</span><span class="number">0.00</span></p>
          <p class="item-txt">礼包推广额</p>
        </div>
      </div>
    </div>
    <div class="select-date">
      <div class="date-line">
        <span>时间筛选</span>
        <span class="date-right" @click="actionSheet">
          {{date}}
          <i class="icon-up"><img src="../../assets/icon/upward.png" alt=""></i>
          <mt-actionsheet :actions="actions" v-model="sheetVisible">
          </mt-actionsheet>
        </span>
      </div>
    </div>
    <mt-tab-container v-model="active">
      <mt-tab-container-item id="package">
        <div class="item">
          <span>package</span>
        </div>
      </mt-tab-container-item>
      <mt-tab-container-item id="commodity">
        <div class="item">
          <span>commodity</span>
        </div>
      </mt-tab-container-item>
      <mt-tab-container-item id="all">
        <div class="item">
          <span>all</span>
        </div>
      </mt-tab-container-item>
    </mt-tab-container>
  </div>
</template>

<script>
  import preHeader from '@/components/header/preHeader'
  export default {
    components: {
      preHeader,
    },
    data() {
      return {
        active: "package",
        date: '昨日',
        actions: [{
            name: '昨日',
            method: this.getTomorrow // 调用methods中的函数
          },
          {
            name: '前一周',
            method: this.getWeek // 调用methods中的函数
          },
          {
            name: '前30日',
            method: this.getBefore30 // 调用methods中的函数
          },
          {
            name: '累计',
            method: this.getCumulative
          }
        ],
        // action sheet 默认不显示
        sheetVisible: false
      }
    },
    methods: {
      actionSheet: function() {
        // 打开action sheet
        this.sheetVisible = true;
      },
      getTomorrow: function(e) {
        this.date = e.name;
      },
      getWeek: function(e) {
        this.date = e.name;
      },
      getCumulative: function(e) {
        this.date = e.name;
      },
      getBefore30: function(e) {
        this.date = e.name;
      },
    }
  }
</script>

<style scoped>
  .volume-info {
    padding: 18px 0;
    background-color: rgb(47, 57, 83);
    color: #fff;
    font-size: 12px;
    display: flex;
    justify-content: space-around;
  }

  .volume-info .item {
    text-align: center;
  }

  .volume-info .number {
    font-size: 14px;
  }

  .select-date {
    padding: 1em;
  }

  .select-date .date-line {
    border: 1px solid #ccc;
    padding: 10px;
    font-size: 12px;
  }

  .select-date .date-line .date-right {
    float: right;
  }

  .select-date .date-line .date-right img {
    width: 12px;
  }
</style>
